import { useNavigate, useParams } from 'react-router'
import {useEffect,useState} from 'react'
import styles from './index.module.less'
import { NavBar, Toast } from 'react-vant';
import { Search } from '@react-vant/icons'
import dog from '../../assets/dog.png'
import axios from 'axios'; 

export default function index() {
  // const location=useLocation()
  // console.log(new URLSearchParams(location.search).get('category'));
  const navigate = useNavigate()
  const params = useParams()
  const [petList,setPetList]=useState([])
  useEffect(()=>{
  axios.get(`/findPetListBytype?pet_type=${params.category}`).then(res=>{
      console.log(res.data);
      setPetList(res.data)

  })
  },[])
  return (
    <div className={styles['note-list']}>
      <header className={styles.header}>
        <NavBar
          title={params.category}
          leftText='返回'
          rightText={<Search fontSize={20} />}
          onClickLeft={() => navigate(-1)}
          onClickRight={() => { }}
        />
      </header>
      <section className={styles.content}>
        <ul>
              {
          petList.map(item=>(
            <div key={item.id}>

               <div className={styles['content-list']}>
          <div className={styles['content-img']}>
            <img src={item.pet_img} alt="" />

          </div>            
                  <div className={styles["neirong"]}>
            <div className={styles["pingzhong-tezheng-container"]}>
            <div className={styles["pingzhong"]}>
              品种:{item.pet_breed}
            </div>
            <div className={styles["tezheng"]}>
              特征:{item.pet_feature}
            </div>

            </div>

            <div className={styles["shijian"]}>
              事件:{item.pet_content}
            </div>
            <div className={styles["lianxifangs"]}>
              联系方式:{item.pet_contact}
            </div>
          </div>
          </div>
        </div>
        ))
         }

        </ul>
     
       

      </section>
    </div>

  )
}
